<!--
 * @Author: chunlai
 * @Date: 2023-12-12 17:25:25
 * @LastEditTime: 2025-11-26 10:06:01
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\index\components\precount\InsurePreCount.vue
 * @Description: 保费预试算
-->
<template>
  <van-popup v-model="show" position="bottom" overlay-class="lay1_shark" round>
    <div class="common_pop_main">
      <div class="pop_head_line bg-fff">
        保费预试算
        <MsImgIcon
          name="cross"
          size="16"
          class="back_btn"
          @click.native="closePop"
        />
      </div>
      <div class="pop_conts_box">
        <div class="user_list_md" :class="{ disabledForm: disEditUserInfo }">
          <div class="ms-pre-count-head">
            被保险人信息
            <p class="insure-age" v-if="isureAgeTip">{{ isureAgeTip }}</p>
          </div>
          <div
            class="user_list_main"
            v-for="(item, index) in assuredList"
            :key="`bbr${index}item`"
          >
            <UserItem :ref="`bbr${index}`" :pindex="index" />
          </div>
        </div>
        <div class="add_item_box" v-if="!disEditUserInfo">
          <div class="addCell" @click="addUserItem()" v-if="canAddBtnMore">
            <van-icon name="add-o" size="20px" />
            <span class="ft15 ml4">添加被保险人</span>
          </div>
        </div>
        <div>
          <div class="ms-pre-count-head">方案选择</div>
          <InsurePlanModule
            v-for="(mainRisk, index) in mainInsu_e"
            :insuData="mainRisk"
            :key="`insur-list${index + totalPrem + new Date().getTime()}`"
          ></InsurePlanModule>
        </div>
        <template v-if="subInsu_e.length > 0">
          <div class="topSec">
            <div class="ftw5 tit"><span class="tag"></span> 附加可选</div>
          </div>
          <div>
            <InsurePlanModule
              v-for="(mainRisk, index) in subInsu_e"
              :insuData="mainRisk"
              :key="`insur-list${index + totalPrem + new Date().getTime()}`"
            ></InsurePlanModule>
          </div>
        </template>
      </div>
      <div class="pop_foot_btns bg-fff">
        <div class="price_box">
          <span class="price-value">{{ totalPrem }}</span>
          <div class="price-label-unit">元/首年</div>
        </div>
        <div
          class="one_btn is_rgt"
          @click="$emit('close')"
          v-if="origin != 'ms'"
        >
          立即投保
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { mapGetters } from "vuex";
import UserItem from "./UserItem";
import InsurePlanModule from "@/views/form/components/InsurePlanModule";
import { dateToString } from "@/methods/date.js";
import { insureBtnMixin } from "@/mixins/edit";
export default {
  name: "InsurePreCount",
  components: { UserItem, InsurePlanModule },
  data() {
    return {
      show: false,
    };
  },
  computed: {
    ...mapGetters({
      mainInsu_e: "risks/mainInsu",
      subInsu_e: "risks/subRisk",
      totalPrem: "insert/totalPrem",
      assuredList: "insert/assuredList",
      bbrAddItemMax: "page/bbrAddItemMax",
      ageRange: "infoReg/ageRange",
      tbBirthMin: "infoReg/tbBirthMin",
      tbBirthMax: "infoReg/tbBirthMax",
      bbBirthMin: "infoReg/bbBirthMin",
      bbBirthMax: "infoReg/bbBirthMax",
      bbrToTbrRela: "dictionary/bbrToTbrRela",
    }),
    canAddBtnMore() {
      let res = true;
      const numLen = this.assuredList.length;
      if (numLen >= this.bbrAddItemMax) {
        res = false;
      }
      return res;
    },
    disEditUserInfo() {
      let res = false;
      if (this.assuredList[0].idNum) {
        res = true;
      }
      return res;
    },
    isureAgeTip() {
      let res = "";
      if (this.ageRange.insured) {
        const bbrAgeRule = JSON.parse(JSON.stringify(this.ageRange.insured));
        if (bbrAgeRule.isDate) {
          res = `投保年龄：${bbrAgeRule.minAge}天 至 ${bbrAgeRule.maxAge}周岁`;
        } else {
          res = `投保年龄：${bbrAgeRule.minAge}周岁 至 ${bbrAgeRule.maxAge}周岁`;
        }
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  mixins: [insureBtnMixin],
  methods: {
    initModule() {
      let userItem = this.assuredList[0];
      if (userItem.birthDate == "") {
        let obj = this.initCountObj();
        this.$store.commit("insert/UPDATE_ASSURED", {
          index: 0,
          data: obj,
        });
      }
      this.show = true;
    },
    closePop() {
      this.show = false;
      this.$emit("close");
    },
    addUserItem() {
      if (!this.canAddBtnMore) {
        return this.$toast("根据保司要求,被保人个数已达上限");
      }
      let obj = this.initCountObj();
      this.$store.commit("insert/ADD_ASSURED", obj);
    },
    initCountObj() {
      let res = {
        birthDate: dateToString(this.bbBirthMax),
        age: this.$GlobalFuns.userAge(dateToString(this.bbBirthMax)),
        socialInsuFlag: "Y",
        sex: "1",
      };
      const len = this.bbrToTbrRela.length;
      res.relationToAppnt = this.bbrToTbrRela[len - 1].keyId;
      res.relationToAppntName = this.bbrToTbrRela[len - 1].text;
      return res;
    },
  },
};
</script>
<style lang="less" scoped>
.common_pop_main {
  background: #f5f5f9;
}
.pop_conts_box {
  padding: 0 5px 14px 5px;
}
.price_box {
  display: flex;
  align-items: flex-end;
  height: 26px;
  line-height: 1;
  color: #d44438;
  .price-value {
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
    font-family: MiSans;
  }
  .price-label-unit {
    font-size: 14px;
    margin-left: 2px;
    line-height: 1.3;
  }
}
.user_list_main {
  border-radius: 4px;
  padding: 0 10px;
  margin-bottom: 10px;
  background-color: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.add_item_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  margin-bottom: 10px;
  margin-top: 20px;
  .addCell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #ffffff;
    color: #f54040;
    border: 1px solid #f54040;
    border-radius: 40px;
  }
}
.insure-age {
  color: #c0c4cc;
  font-weight: 400;
  font-size: 12px;
  font-family: Microsoft Yahei, sans-serif;
  margin-left: 10px;
}
</style>
